<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>QQBot Install</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <blockquote class="layui-elem-quote">
                配置后需要修改重新配置请删除config文件夹下的InstallConfig.xml文件后重新访问该页面。
                <br />
                或者打开文件修改内容。
            </blockquote>
            <form class="layui-form" action="">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>数据库配置<span style="color:red">（小白请不要选择MySQL，选了你又配置不对！）</span></legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库类型</label>

                    <div class="layui-input-block">
                        <input type="radio" name="DBType" value="SQLite" title="SQLite" checked="">
                        <input type="radio" name="DBType" value="MySQL" title="MySQL">
                    </div>
                </div>
                <div class="layui-form-item" id="MySQL">
                    <label class="layui-form-label">数据库地址</label>
                    <div class="layui-input-block">
                        <input type="text" id="Address" value="QQBot.db" name="DBAddress" lay-verify="required" lay-reqtext="数据库必填" placeholder="" autocomplete="off" class="layui-input">
                        <div class="layui-form-mid layui-word-aux">
                            SQLite默认将存储在QQBot.db中，MySQL数据库连接示例：server=192.168.3.2;port=3306;database=QQBot;Uid=root;Pwd=admin;CharSet=utf8
                        </div>
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>用户名密码配置</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="UserName" value="admin" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">登录密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="PassWord" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="PassWord1" required lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="install">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['form', 'layer', 'jquery'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;
            form.verify({
                UserName: function (value) {
                    if (value.length < 5) {
                        return '用户名长度不能低于5位';
                    }
                }
                , PassWord: [
                    /^[\S]{6,18}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
            });
            //监听提交
            form.on('submit(install)', function (data) {

                data = data.field;
                if (data.PassWord != data.PassWord1) {
                    layer.msg("两次密码输入不一致！", { icon: 5 });
                    return false;
                }
                layer.confirm('请确认您要提交的配置，如果数据库配置错误将无法启动。', function (index) {
                    $.post("/api/install", {
                        UserName: data.UserName,
                        PassWord: data.PassWord,
                        DBType: data.DBType,
                        DBAddress: data.DBAddress
                    }, function (e) {
                        if (e.Code == 200) {
                            var index = layer.msg('配置完成，请重新启动容器后访问！', function () {
                                // 关闭弹出层
                                layer.close(index);
                                var iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);
                            });
                        } else {
                            layer.msg(e.Message, { icon: 5 });
                        }
                    });
                });
                return false;
            });
        });
    </script>
</body>
</html>